<div
#anchorRef
[style.left.px]="LogicLoadBalancer.options.X"
[style.top.px]="LogicLoadBalancer.options.Y"
>
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/loadbalancer.svg">
    </div>  
</div>
<div style="display:none">
    <div #options>
        <div class="options-container">
            <div>
                <span class="property-name">Type: <info-tooltip [Message]="'Changes the type of the load balancer. This can affect available balancing algorithms.'"></info-tooltip></span>
                <div>
                    <mat-form-field appearance="fill" class="action-endpoint">
                        <mat-select (selectionChange)="handleTypeChange(); afterChange()" [(ngModel)]="LogicLoadBalancer.options.type">
                          <mat-option *ngFor="let type of LoadBalancerTypeKeys" [value]="type">{{LoadBalancerType[type]}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
            <div>
                <span class="property-name">Balancing Algorithm: <info-tooltip [Message]="'Changes the balancing algorithm of the load balancer. This changes the data routing behaviour.'"></info-tooltip></span>
                <div>
                    <mat-form-field appearance="fill" class="action-endpoint">
                        <mat-select (selectionChange)="afterChange()" [(ngModel)]="LogicLoadBalancer.options.algorithm">
                          <mat-option [disabled]="algo == BalancingAlgorithm['URL Hash'] && LogicLoadBalancer.options.type == LoadBalancerType['Layer 4']" *ngFor="let algo of BalancingAlgorithmKeys" [value]="algo">{{BalancingAlgorithm[algo]}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
        </div>
    </div>
</div>